<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq</title>
	<script src="jquery.js"></script>
	
</head>
<style>
	.error{
		color:#f00;
		font-weight: bold;
		display: none;
	}
</style>


<body>
	<form action="reg.php" method='get'>
		<p>用户名：</p>
		<p><input type="text" name="username" class='auth'>
			<span class='error'>用户名长度至少6位</span>
		</p>
		<p>密码：</p>
		<p><input type="text" name="password"  class='auth'>
			<span class='error'>密码长度至少8位</span>
		</p>
		<p>确认密码：</p>
		<p><input type="text" name="repassword" class='auth'>
			<span class='error'>密码不一致</span>
		</p>
		<p>邮箱：</p>
		<p><input type="text" name="email"  class='auth'>
			<span class='error'>邮箱格式不正确</span>
		</p>

		<p>手机号码：</p>
		<p><input type="text" name="phone"  class='auth' maxlength='11'>
			<span class='error'>手机号码不正确</span>
		</p>
		<p><input type="submit" value='ok'></p>
	</form>	
</body>
<script>
//缺少用户名是否存在，验证码是否正确

/*参考京东*/
	//表单验证
	/*	1.每个input验证
		2.提交按钮后，所有input非空验证
		3.验证每个input提交的数据是否正确
	*/

	//$('.auth').data({'s':0});//每个标签auth身上都加一个标记，用data();

	// 1.每个input验证
	$('input[name=username]').blur(function(){
		val=this.value;
		if(val.length<6){
			$(this).data({'s':0});//每个标签auth身上都加一个标记，用data();
			$(this).next().show();//display:inline;行标签显示； display:block;块状标签显示
		}else{
			$(this).data({'s':1});
			$(this).next().hide();
		}
	});

	$('input[name=password]').blur(function(){
		val=this.value;
		if(val.length<8){
			$(this).data({'s':0});
			$(this).next().show();//display:inline;行标签显示； display:block;块状标签显示
		}else{
			$(this).data({'s':1});
			$(this).next().hide();
		}
	});

	$('input[name=repassword]').blur(function(){

		val1=$('input[name=password]').val();

		val2=this.value;
		if(val1 != val2){
			$(this).data({'s':0}); //0错误 1正确
			$(this).next().show();//display:inline;行标签显示； display:block;块状标签显示
		}else{
			$(this).data({'s':1});
			$(this).next().hide();
		}
	});

	$('input[name=email]').blur(function(){
		val=this.value;
		if(!val.match(/^\w+@\w+.\w$/i)){
			$(this).data({'s':0});//每个标签auth身上都加一个标记，用data();
			$(this).next().show();//display:inline;行标签显示； display:block;块状标签显示
		}else{
			$(this).data({'s':1});
			$(this).next().hide();
		}
	});

	$('input[name=phone]').blur(function(){
		val=this.value;
		if(!val.match(/^139\d{8}$/)){
			$(this).data({'s':0});//每个标签auth身上都加一个标记，用data();
			$(this).next().show();//display:inline;行标签显示； display:block;块状标签显示
		}else{
			$(this).data({'s':1});
			$(this).next().hide();
		}
	});

	//2.提交按钮后，所有input非空验证
	$('form').submit(function(){
		$('.auth').blur();

		//3.验证每个input提交的数据是否正确
		tot=0;
		$('.auth').each(function(){
			tot+=$(this).data('s');
		});

		if(tot!=5){
			return false;
		}
		//alert(tot);
		
	});
	
</script>
</html>